<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h1>{{ msg }}</h1>
		
		<nav>
			<router-link :to="{ name: 'home' }">Home</router-link> |
			<router-link :to="{ name: 'about'}">About</router-link> |
			<router-link :to="{ path: '/help' }">Help</router-link> |
			<router-link :to="{ path: '/user' }">User</router-link>
		</nav>
		
		<div style="border: 2px solid #333">
			<router-view></router-view>
		</div>
	</div>
	
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
	<script>
		const HomeView = { // /
			template: `
				<div>
					<h2>Home Page</h2>
					<ul>
						<li v-for="item of list">
							<!--<router-link :to="{ name: 'product-detail', params: { _id: item.id } }">{{ item.name }}</router-link>-->
							<router-link :to="{ name: 'product-detail', params: { _id: item.id, pn: item.name }, query: { from: 'home' } }">{{ item.name }}</router-link>
						</li>
					</ul>
				</div>
			`,
			data() {
				return {
					list: [
						{ id: 123, name: "水壶" },
						{ id: 1123, name: "咖啡" },
						{ id: 13, name: "茶叶" },
						{ id: 23, name: "手表" },
						{ id: 3, name: "红糖" },
					]
				}
			}
		}
		
		const UserView = {
			template: `<div style="background: skyblue">
				<h1>User Page - 公共部分</h1>
				<nav>
					<router-link to="/user/profile">Profile</router-link> |
					<router-link to="/user/posts">Posts</router-link>
				</nav>
				<router-view style="background: pink"></router-view>
			</div>`
		}
		
		// 定义组件只写不一样的地方
		const UserProfile = {
			template: `<p>Profile <br>Profile <br>Profile <br>Profile <br>Profile <br>Profile <br></p>`
		}
		
		const UserPosts = {
			template: `<p>Posts <br>Posts <br>Posts <br>Posts <br>Posts <br>Posts <br></p>`
		}
		
		const AboutView = {
			template: `<div style="background: red">About Page</div>`
		}
		const HelpView = {
			template: `<div style="background: yellow">Help Page</div>`
		}
		
		const ProductDetailView = {
			template: `<div>
				<h1>ProductDetailView</h1>
				<h2>{{ $route.params._id }}</h2>
			</div>`,
			created() {
				console.log(this.$route)
			}
		}
		
		const NotFoundView = { 
			template: `<div style="font-size: 80px; color: red; text-align: center">404</div>`
		}
		
		const routes = [
			{ path: '/', alias: '/index', name: 'home', component: HomeView },
			{ path: '/about', name: 'about', component: AboutView },
			{ path: '/help', name: 'help', component: HelpView },
			{ 
				path: '/user', 
				name: 'user', 
				component: UserView,
				// 核心：定义嵌套路由（子路由）
				children: [
					// /user/profile
					{ path: 'profile', name: 'user-profile', component: UserProfile },
					// /user/posts
					{ path: 'posts', name: 'user-posts', component: UserPosts },
				]
			},
			// { path: '/user/profile', name: 'user-profile', component: UserProfile },
			// { path: '/user/posts', name: 'user-posts', component: UserPosts },
			{ 
				path: '/product/:_id/pname/:pn', 
				name: 'product-detail', 
				component: ProductDetailView ,
			},
			{ path: '/*', component: NotFoundView },
		]
		
		const router = new VueRouter({
			routes,
			mode: 'hash',
		})
		
		const app = new Vue({
			router,
			data: {
				msg: "Hello Vue Router 路由！"
			},
		}).$mount("#app")
	</script>
</body>
</html>